<template>
  <div :class="['artwork-desc', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="artwork-desc-left" v-if="$ua.isFromPc()">
      <!-- <client-only>
        <video-player
          ref="videoPlayer"
          @play="onPlayerPlay($event)"
          :playsinline="true"
          :options="playerOptions"
          class="u-video video-player vjs-custom-skin"
        />
      </client-only> -->
      <div class="artwork-header">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/artwork' }">精品推荐</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.workType || series.find((s) => s.data_id == artData.type_child)?.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="content">
          <ul class="left-menu">
            <li :class="['item', activeImg === index ? 'active-item' : '']" v-for="(item, index) in artData.opus_id" :key="index" @click="handleImg(item, index)">
              <!-- {{ getBigImg(item.id || item) }} -->
              <el-image v-if="item.id || item" :src="getBigImg(item.id || item)" alt="" fit="cover" />
            </li>
          </ul>
          <div class="right-content">
            <div class="big-img">
              <!-- <img v-if="chooseImg.id || chooseImg" class="image" :src="getBigImg(chooseImg.id || chooseImg)" @click="lookBig(chooseImg?.id || chooseImg)" alt="" /> -->
              <img v-if="chooseImg.id || chooseImg" class="image" :src="artData.thumbnail" @click="lookBig(chooseImg?.id || chooseImg)" alt="" />
              <div class="look" @click="lookBig(chooseImg?.id || chooseImg)">
                <img class="look-img" src="@/static/img/workDesc/look.png" alt="">
                查看
              </div>
            </div>
            <div class="right-info">
              <div class="name">
                {{ artData.name + (artData.opus_size ? '（' + artData.opus_size + 'cm' +'）' : '') }}
              </div>
              <div class="type">
                <span class="top">{{ artData.opus_content }}</span>
                <span class="bottom">{{ $route.query.workType || series.find((s) => s.data_id == artData.type)?.name + ' ' + series.find((s) => s.data_id == artData.type_child)?.name }}</span>
              </div>
              <div class="line"></div>
              <div class="buy clearfix">
                <div class="left-info" v-if="artData.price_min">
                  <div class="price">
                    预估价
                  </div>
                  <div class="number">
                    CNY {{ artData.price_min + '-' + artData.price_max }}
                  </div>
                </div>
                <div class="right-btn all-center" @click="handleBuy">
                  联系购买
                </div>
                <el-dialog
                  title="联系购买"
                  :visible.sync="buyVisible"
                  width="400px"
                  @close="handleClose">
                  <div class="phone">
                    联系电话：18340011959
                  </div>
                  <div class="email">
                    联系邮箱：yiming950215@163.com
                  </div>
                  <div class="we-chat">
                    客服微信：15265667650
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="buyVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
              </div>
              <div class="line"></div>
              <div class="personal-info">
                <img class="head-img" @click="goArtHome(artData.art_info?.data_id)" :src="artData.art_info?.photo ? artData.art_info?.photo : '@/static/img/user/headImg.jpg'" alt="">
                <div class="user">
                  <div class="name">
                    {{ artData.art_name }}
                  </div>
                  <div class="position" :title="artData?.art_info?.position">
                    {{ artData?.art_info?.position }}
                  </div>
                </div>
                <div class="info-follow" @click="handleFollow(artData?.art_info?.is_focus)">
                  <img v-if="artData?.art_info?.is_focus == 1" src="@/static/img/follow_active.png" alt="">
                  <img v-else src="@/static/img/follow.png" alt="">
                  关注
                </div>
              </div>
              <div class="desc">
                {{ artData.introduction }}
              </div>
              <div class="btn">
                <div class="collect all-center" @click="handleCollect(artData?.is_focus)">
                  <img v-if="artData.is_focus" src="@/static/img/editPersonalHome/favorite_active.png" alt="">
                  <img v-else src="@/static/img/editPersonalHome/favorite_solid.png" alt="">
                  {{ artData.focus_total }}
                </div>
                <div class="share all-center" @click="handleShare(artData.share_times)">
                  <img src="@/static/img/editPersonalHome/share.png" alt="">
                  分享
                </div>
                <el-dialog
                  title="分享"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose">
                  <share :sysInfo="share_url" />
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="show-content">
        <div class="left-menu">
          <ul>
            <li :class="['title', index === active ? 'active-title' : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenu(item.id, index)">
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="right-content">
          <div class="desc" ref="desc">
            <div class="title">
              {{ artData.work_detail }}
            </div>
            <!-- <ul>
              <li>峨眉山-乐山大佛文化旅游IP全案孵化</li>
              <li>乐乐朋友</li>
              <li>慈乐乐/阿祖/宝妹子/阿佑/妮妮</li>
              <li>蔡蔡文化</li>
              <li>四川乐山</li>
              <li>2019年05月</li>
            </ul> -->
          </div>
          <div class="explain" ref="explain" v-if="artData.work_explain">
            <div class="title">
              说明
            </div>
            <div class="desc">
              {{ artData.work_explain }}
            </div>
          </div>
          <div class="video" ref="video" v-if="artData.work_appraise && artData.work_appraise[0]">
            <div class="title">
              解读
            </div>
            <client-only v-if="work_appraise_type">
              <video-player
                ref="videoPlayer"
                @play="onPlayerPlay($event)"
                :playsinline="true"
                :options="playerOptions"
                class="u-video video-player vjs-custom-skin"
              />
            </client-only>
            <audioPlay
              v-else
              :src="work_appraise_src"
            />
          </div>
          <div class="recomment" ref="recomment">
            <div class="title">
              推荐
            </div>
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide swiper-no-swiping" v-for="(item, i) in artworkList" @click="goDesc(item.data_id, item.work_type)" :key="i">
                  <div class="img-box">
                    <img v-if="item.thumbnail" class="img" :src="item.thumbnail" alt="" />
                  </div>
                  <div class="info-box">
                    <div class="name">
                      {{ item.name }}
                    </div>
                    <div class="second-title">
                      <p class="author">
                        {{ item.art_name }}
                      </p>
                      <p class="quality">
                        {{ series.find((s) => s.data_id == item.type_child)?.name }}
                      </p>
                    </div>
                    <div class="collect">
                      <img v-if="item.is_focus" src="@/static/img/favorite_grey_active.png" alt="">
                      <img v-else src="@/static/img/favorite_grey.png" alt="">
                      {{ item.focus_total }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>
          <div class="comment-area" ref="commentArea">
            <div class="comment-area-title" ref="commentArea">
              {{ `评论(${$store.state.user.commentCount})` }}
            </div>
            <div class="comment-input">
              <img class="head-img" :src="$store.state.user.headImg || require('@/static/img/user/headImg.jpg')" alt="">
              <el-input
                v-model="comment"
                type="textarea"
                resize="none"
                maxlength="2000"
                show-word-limit
              />
            </div>
            <div class="release-comment" @click="replyComment">
              发布评论
            </div>
            <Comment
              :list="$store.getters['user/getCommentList']"
              :parentId="1"
            ></Comment>
          </div>
        </div>
      </div>
    </div>
    <div class="artwork-desc-left" v-else>
      <div class="artwork-header">
        <div class="name">
          {{ artData.name + (artData.opus_size ? '（' + artData.opus_size + 'cm' +'）' : '') }}
        </div>
        <div class="type">
          <span class="top">{{ artData.opus_content }}</span>
          <span class="bottom">{{ series.find((s) => s.data_id == artData.type)?.name + ' ' + series.find((s) => s.data_id == artData.type_child)?.name }}</span>
        </div>
        <div class="line" />
      </div>
      <div class="user">
        <div class="photo">
          <img :src="artData.art_info?.photo" alt="">
        </div>
        <div class="user-info">
          <div class="name">
            {{ artData.art_name }}
          </div>
          <div class="position">
            {{ artData?.art_info?.position }}
          </div>
        </div>
        <div class="info-follow all-center" @click="handleFollow(artData?.art_info?.is_focus)">
          <img v-if="artData?.art_info?.is_focus == 1" src="@/static/img/follow_active.png" alt="">
          <img v-else src="@/static/img/follow.png" alt="">
          关注
        </div>
      </div>
      <div class="img-box">
        <!-- <div class="big-img">
          <el-image class="image" :src="getBigImg(chooseImg.id || chooseImg)" @click="lookBig(chooseImg?.id || chooseImg)" alt="" fit="cover" />
        </div>
        <ul class="left-menu">
          <li :class="['item', activeImg === index ? 'active-item' : '']" v-for="(item, index) in artData.opus_id" :key="index" @click="handleImg(item, index)">
            {{ getBigImg(item.id || item) }}
            <el-image :src="getBigImg(item.id || item)" alt="" fit="cover" />
          </li>
        </ul> -->
        <div class="bannerBox">
          <div class="swiper-container-banner">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,index) of artData.opus_id" :key="index" @click="lookBig(item.id || item)">
                <img class="img" :src="getBigImg(item.id || item)" >
              </div>
            </div>
          </div>
          <!-- <div style="height: 15px;width: 400px;"></div> -->
          <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
              <div class="swiper-slide swiper-bottom" v-for="(item,index) of artData.opus_id" :key="index">
                <img class="img" :src="getBigImg(item.id || item)" >
              </div>
            </div>
          </div>
        </div>
        <div class="introduction">
          {{ artData.introduction }}
        </div>
        <div class="btn">
          <div class="collect all-center" @click="handleCollect(artData?.is_focus)">
            <img v-if="artData.is_focus" src="@/static/img/editPersonalHome/favorite_active.png" alt="">
            <img v-else src="@/static/img/editPersonalHome/favorite_solid.png" alt="">
            {{ artData.focus_total }}
          </div>
          <div class="share all-center" @click="handleShare(artData.share_times)">
            <img src="@/static/img/editPersonalHome/share.png" alt="">
            分享
          </div>
        </div>
        <div class="work_detail" v-if="artData.work_detail">
          <div class="work_detail_title">
            说明
          </div>
          <div class="desc">
            {{ artData.work_detail }}
          </div>
        </div>
        <!-- <div class="explain" ref="explain">
          <div class="title">
            说明
          </div>
          <div class="desc">
            {{ artData.work_explain }}
          </div>
        </div> -->
        <div class="video" ref="video" v-if="artData.work_appraise && artData.work_appraise[0]">
          <div class="title">
            解读
          </div>
          <client-only>
            <video-player
              ref="videoPlayer"
              @play="onPlayerPlay($event)"
              :playsinline="true"
              :options="playerOptions"
              class="u-video video-player vjs-custom-skin"
            />
          </client-only>
        </div>
        <div class="recomment" ref="recomment">
          <div class="title">
            推荐
          </div>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide swiper-no-swiping" v-for="(item, i) in artworkList" @click="goDesc(item.data_id, item.work_type)" :key="i">
                <el-image v-if="item.thumbnail" :src="item.thumbnail" fit="cover" alt="" />
                <div class="info">
                  <div class="name">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import share from '@/components/share.vue'
import { Swiper as SwiperClass, Navigation, Pagination } from 'swiper'
import comment from '@/components/comment'
import audioPlay from '@/components/audioPlay'
import { getToken } from "@/utils/auth";
import { getBigImg } from '@/utils/downloadFile'
import 'swiper/swiper-bundle.css'
import { getVideoUrl, getImgUrl, getUserPhoto } from '@/utils/downloadFile'
export default {
  scrollToTop: true,
  name: '',
  components: {
    Comment: comment,
    share,
    audioPlay
  },
  props: {},
  data () {
    return {
      work_appraise_type: false,
      work_appraise_src: '',
      share_url: {},
      dialogVisible: false,
      commentList: [],
      data_id: '',
      buyVisible: false,
      userInfo: {},
      artData: {},
      playerOptions: {},
      comment: '',
      followActive: false,
      artworkList: [],
      showMore: false,
      collectActive: false,
      swiper: undefined,
      bannerSwiper: undefined,
      activeImg: 0,
      chooseImg: {},
      series: [],
      menuList: [
        {
          id: 'work_detail',
          name: '详情'
        },
        {
          id: 'work_explain',
          name: '说明'
        },
        {
          id: 'work_appraise',
          name: '解读'
        },
        {
          id: 'recomment',
          name: '推荐'
        },
        {
          id: 'commentArea',
          name: '评论'
        },
      ],
      active: 0
    }
  },
  watch: {
    '$route' (to, from) {
    // 路由发生变化页面刷新
      this.$router.go(0);
    }
  },
  created () {},
  mounted () {
    this.toTop()
    this.$nextTick(function () {
      this.galleryThumbsLunbo();
      this.galleryTopLunbo();
    });
    this.data_id = this.$route.query.data_id
    // this.userInfo = this.$store.state.user.info.userInfo
    // this.getWorksList()
    this.$nextTick(() => {
      SwiperClass.use([Navigation, Pagination])
      this.swiper = new SwiperClass('.swiper-container', {
        slidesPerView: 'auto',
        // autoplay: true,
        observer: true,
        observeParents: true,
        paginationClickable: true,
        noSwiping: true,
        spaceBetween: 24,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'my-button-disabled'
        },
        on: {
          slideChange:(swiper) => {
            // console.log(this.$)
            this.VideoChange(swiper.activeIndex)
          }
        }
      })

      // SwiperClass.use([Navigation, Pagination])
      this.bannerSwiper = new SwiperClass('.swiper-container-banner', {
        slidesPerView: 'auto',
        // autoplay: true,
        observer: true,
        observeParents: true,
        // paginationClickable: true,
        // noSwiping: true,
        // spaceBetween: 24,
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        //   disabledClass: 'my-button-disabled'
        // },
        // on: {
        //   slideChange:(swiper) => {
        //     // console.log(this.$)
        //     this.VideoChange(swiper.activeIndex)
        //   }
        // }
      })
    })
    this.playerOptions = {
      playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
      autoplay: false, // 如果true,浏览器准备好时开始回放。
      aspectRatio: '4:3', // 播放器高宽占比（例如"16:9"或"4:3"）
      muted: false, // 默认情况下将会消除任何音频。
      loop: false, // 导致视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      sources: [
        {
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: '' // url地址
        }
      ],
      // poster: 'http://221.12.172.138:908/Upload/202101111326395044458.png', // 封面地址
      // width: document.documentElement.clientWidth, //播放器宽度
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
      },
      preload: "auto"
    },
    this.getWorkInfo()
    this.getProductType()
    this.getCommentList()
  },
  methods: {
    getBigImg,
    getVideoUrl,
    getImgUrl,
    getUserPhoto,
    goArtHome(id) {
      const newUrl = this.$router.push({ path: '/personal', query: { id } })
      window.open(newUrl.href, '_blank')
    },
    goDesc(data_id, type) {
      console.log(data_id)
      if (type == 1) {
        this.$router.push({ path: '/artwork/desc', query: { data_id, workType: this.workType } })
      } else if (type == 2) {
        this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
      }
    },
    galleryTopLunbo() {
      this.galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 0,
        loop: true,
        loopedSlides: 5,
        // 左右按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        thumbs: {        //thumbs组件专门用于制作带缩略图的swiper
          swiper: this.galleryThumbs,
          slideThumbActiveClass: 'swiper-slide-thumb-active',
        },
      });
    },
    galleryThumbsLunbo() {
		  this.galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 15,    //在slide之间设置距离（单位px）
        slidesPerView: 3,    //设置slider容器能够同时显示的slides数量
        loop: true,        //设置为true 则开启loop模式
        freeMode: true,    //默认为false，普通模式：slide滑动时只滑动一格
        loopedSlides: 7,    //一般设置大于可视slide个数2个即可
        watchSlidesVisibility: true,   //开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
        watchSlidesProgress: true,   //开启这个参数来计算每个slide的progress(进度、进程)
      });
	  },
    toTop() {
      document.documentElement.scrollTop = 0;
    },
    async getProductType() {
      const res = await this.$api.getProductType({})
      if (res.status == '$SUCCESS') {
        this.series = res.result.item_list
      }
    },
    // 查看大图
    lookBig(id) {
      console.log(id)
      // return
      if (this.$ua.isFromPc()) {

      }
      if (!getToken()) return this.$ua.isFromPc() ? this.$message.warning('请您先登陆才可以查看大图') : this.$toast('请您先登陆才可以查看大图')
      if (process.browser && this.artData.opus_id && this.artData.opus_id.length > 0 ) {
        let {
          BasicDraw,
          BigImageShow
        } = require("../../utils/main.js")
        let basicDraw = new BasicDraw(); // 创建基础渲染类
        basicDraw.start(); // 开始渲染
        new BigImageShow().showBigImg(id)

        document.getElementById('bigIamgeClose').addEventListener('click', (e) => {
          basicDraw.dispose()
          e.stopPropagation()
        })
      }
    },
    // 选中左侧小图
    handleImg(item, index) {
      this.activeImg = index
      this.chooseImg = item
    },
    // 联系购买
    handleBuy() {
      this.buyVisible = true
    },
    handleClose() {
      this.buyVisible = false
    },
    // 点击说明、详情、评论等菜单
    handleMenu(id, index) {
      this.active = index
      // 获取元素在页面中的位置
      let top1 = this.$refs[id]?.getBoundingClientRect().top
      // 获取滚动条位置
      let top2 = document.body.scrollTop||document.documentElement.scrollTop
      window.scrollTo({
        top:top1 + top2 - 128, // 相加即为元素实际顶部距离
        left:0,
        behavior: "smooth"
      })
    },
    // 获取艺术品列表
    getWorksList(params) {
      this.$api.getRecommendWorks(params).then(res => {
        if (res.status == '$SUCCESS') {
          this.artworkList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          // if (this.artworkList.length == 0) {
          //   setTimeout(() => {
          //     this.getWorksList({ work_recommend: 1 })
          //   }, 1000)
          // }
          if (this.artworkList.length == 0) {
            const index = this.menuList.findIndex(item => item.id === 'recomment')
            this.menuList.splice(index, 1)
          }
        }
      })
    },
    getWorkInfo() {
      const params = {
        data_id: this.$route.query.data_id
      }
      this.$api.getWorkInfo(params).then(res => {
        console.log(res)
        if (res.status == '$SUCCESS') {
          this.artData = res.result
          if (!this.artData.work_detail) {
            const index = this.menuList.findIndex(item => item.id === 'work_detail')
            this.menuList.splice(index, 1)
          }
          if (!this.artData.work_explain) {
            const index = this.menuList.findIndex(item => item.id === 'work_explain')
            this.menuList.splice(index, 1)
          }
          if (!this.artData.work_appraise) {
            const index = this.menuList.findIndex(item => item.id === 'work_appraise')
            this.menuList.splice(index, 1)
          }
          this.playerOptions['sources'][0]['src'] = Array.isArray(res.result.work_appraise) ? res.result.work_appraise[0] : ''
          if (this.playerOptions['sources'][0]['src']) {
            this.work_appraise_type = /.mp4$/.test(this.playerOptions['sources'][0]['src']);
            this.work_appraise_src = Array.isArray(res.result.work_appraise) ? res.result.work_appraise[0] : ''
          }
          // this.chooseImg = this.artData.opus_id[0]
          // this.artData.opus_id.forEach(item => {
          //   item.bigImgUrl = getBigImg(item.id)
          // })
          this.chooseImg = this.artData?.opus_id[0]
          console.log('this.chooseImg', this.chooseImg)
          this.getWorksList({ data_id: this.artData.data_id, op: 'get_recomment' })
        }
      })
    },
    getCommentList() {
      const params = {
        works_id: this.$route.query.data_id
      }
      this.$store.dispatch('user/getComment', params)
    },
    // 发布评论
    replyComment() {
      if (this.$store.state.user.token) {
        if (this.comment.trim()) {
          const params = {
            works_id: this.$route.query.data_id - 0,
            comment: this.comment,
            parent_id: 0
          }
          this.$store.dispatch('user/replyComment', params).then(res => {
            console.log('评论内容', res)
            this.getCommentList()
          })
          // this.$api.replyComment(params, {}).then(res => {
          //   if(res.status === '$SUCCESS') {
          //     this.$message.success('发布评论成功')
          //   }
          // })
        } else {
          this.$message.error('请输入评论内容')
        }
      } else {
        this.$message.warning('请您先登陆')
      }
    },
    // 播放视频
    onPlayerPlay(e) {
      // this.$refs.videoPlayer.player.requestFullscreen()
    },
    // 关注功能
    handleFollow(is_focus) {
      if(this.$store.state.user.token) {
        if (!is_focus) {
          this.followActive = !this.followActive
          this.$api.artFocus({ art_id: this.artData.art_id }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.getWorkInfo()
              this.$message.success('关注成功')
            }
          })
        } else {
          this.$message.warning('您已关注当前艺术家')
        }
      } else {
        this.$message.warning('请您先登陆')
        this.$store.commit("user/SET_LOGIN", true)
      }
    },
    handleCollect(is_focus) {
      if(this.$store.state.user.token) {
        if (!is_focus) {
          this.collectActive = !this.collectActive
          this.$api.workFocus({ work_id: this.data_id - 0 }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.$message.success('收藏成功')
              this.getWorkInfo()
            }
          })
        } else {
          // this.$message.warning('您已收藏该作品')
          this.collectActive = !this.collectActive
          this.$api.cancelWorkFocus({ data_id: this.data_id }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.$message.success('取消收藏')
              this.getWorkInfo()
            }
          })
        }
      } else {
        this.$message.error('请您先登陆')
        this.$store.commit("user/SET_LOGIN", true);
      }
    },
    updateArtWorks(params) {
      this.$api.updateArtWorks({}, params).then(res => {
        if (res.status == '$SUCCESS') {
          this.$message.success('复制链接成功')
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});
    },
    handleShare(share_times) {
      if (this.$store.state.user.token) {
        const params = {
          share_times: ++share_times,
          data_id: this.$route.query.data_id
        }
        this.updateArtWorks(params)
      } else {
        return this.$message.error('请先登陆')
      }
      // this.dialogVisible = true
      //创建input标签
      const input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = window.location.href
      this.share_url = {
        url: input.value,
        title: this.artData.name
      }
      console.log(this.share_url)

      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('复制链接成功!')
      //移除input标签
      document.body.removeChild(input)
    },
    seeMore() {
      this.showMore = true
    }
  }
}
</script>

<style scoped lang="less">
.artwork-desc {
  &.z-web {
    // padding: 60px 132px 80px;
    background: #fff;
    // display: flex;
    .artwork-desc-left {
      .artwork-header {
        padding: 60px 132px 40px;
        background: #FAF7F5;

        .breadcrumb {
          margin-bottom: 67px;
        }

        .content {
          display: flex;
          .left-menu {
            margin-right: 52px;
            .item {
              width: 96px;
              margin-bottom: 40px;
              cursor: pointer;

              img {
                width: 100%;
              }

              &.active-item {
                border: 2px solid red;
              }
            }
          }

          .right-content {
            flex: 1;
            display: flex;

            .big-img {
              width: 1000px;
              height: 500px;
              display: inline-block;
              margin-right: 50px;
              text-align: center;

              .image {
                max-width: 100%;
                max-height: 85%;
                margin-bottom: 33px;
                cursor: pointer;
                object-fit: cover;
              }

              .look {
                display: block;
                font-size: 16px;
                color: #000000;
                text-align: center;
                margin-bottom: 40px;
                cursor: pointer;
              }
            }

            .right-info {
              flex: 1;

              .name {
                font-size: 24px;
                font-weight: bold;
                color: #000;
                margin-top: 33px;
              }

              .type {
                font-size: 18px;
                color: #000;
                margin: 15px 0 32px;
              }

              .line {
                width: 100%;
                height: 1px;
                background: #E8E8E8;
              }

              .buy {
                margin: 30px 0;

                .phone,
                .email,
                .we-chat {
                  font-size: 14px;
                  font-weight: 600;
                  color: #333;
                }

                ::v-deep(.el-dialog__title) {
                  font-size: 18px;
                  font-weight: 600;
                  color: #333;
                }

                ::v-deep(.el-dialog__body) {
                  padding: 20px 90px;
                }

                ::v-deep(.el-dialog__footer) {
                  text-align: center;

                  .el-button--primary {
                    width: 220px;
                    height: 48px;
                    background: #E0CBB4;
                    border-radius: 0;
                    font-size: 16px;
                    color: #333;
                    padding: 0;
                    border: 0;
                  }
                }

                .left-info {
                  float: left;
                  .price {
                    font-size: 14px;
                    color: #000;
                    margin-bottom: 7px;
                  }

                  .number {
                    font-size: 18px;
                    font-weight: 600;
                    color: #000;
                  }
                }

                .right-btn {
                  cursor: pointer;
                  float: right;
                  width: 121px;
                  height: 42px;
                  border: 1px solid #E8E8E8;
                  font-size: 16px;
                  color: #000;
                }
              }

              .personal-info {
                position: relative;
                margin-top: 22px;

                .head-img {
                  width: 58px;
                  height: 58px;
                  border-radius: 50%;
                  vertical-align: sub;
                  margin-right: 11px;

                  img {
                    width: 58px;
                    height: 58px;
                  }
                }

                .user {
                  display: inline-block;
                  font-size: 16px;
                  color: #333;

                  .position {
                    width: 300px;
                    overflow:hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow:ellipsis;
                  }
                }

                .info-follow {
                  position: absolute;
                  right: 0;
                  bottom: 6px;
                  cursor: pointer;
                  line-height: 16px;
                  font-size: 16px;
                  color: #000;
                }

                .content {
                  font-size: 14px;
                  color: #333;
                }
              }

              .desc {
                font-size: 14px;
                color: #333;
                margin: 30px 0;
              }

              .btn {
                display: flex;
                font-size: 16px;
                font-family: Source Han Serif SC;
                font-weight: 400;
                color: #000;

                .collect,
                .share {
                  width: 222px;
                  height: 42px;
                  border: 1px solid #E8E8E8;
                  cursor: pointer;

                  img {
                    margin-right: 9px;
                  }
                }

                .collect {
                  margin-right: 13px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
      .show-content {
        display: flex;
        // margin-bottom: 20px;
        margin-top: 60px;
        padding: 0 132px;

        .left-menu {
          // display: inline-block;

          ul {
            width: 40px;
            margin-right: 108px;

            .title {
              font-size: 18px;
              color: #999;
              margin-bottom: 40px;
              cursor: pointer;

              &:last-child {
                margin-bottom: 0;
              }

              &.active-title {
                color: #000;
              }
            }
          }
        }

        .right-content {
          font-size: 18px;
          color: #000;

          .desc {
            margin-bottom: 60px;
            .title {
              font-size: 14px;
            }

            ul li {
              font-size: 18px;
              font-weight: 400;
              color: #000000;
            }
          }

          .explain {
            color: #333;
            margin-bottom: 60px;

            .title {
              margin-bottom: 30px;
              font-size: 14px;
              font-weight: bold;
              color: #000;
            }

            .desc {
              font-size: 18px;
              color: #333333;
            }
          }

          .video {
            color: #333;
            margin-bottom: 60px;

            .title {
              margin-bottom: 30px;
              font-size: 14px;
              font-weight: bold;
              color: #000;
            }
          }

          .recomment {
            color: #333;
            margin-bottom: 70px;
            width: 1440px;
            background: #fff;
            --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
            --swiper-navigation-color: #000;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 30px;/* 设置按钮大小 */
            position: relative;

            .title {
              margin-bottom: 30px;
              font-size: 14px;
              font-weight: bold;
              color: #000;
            }

            ::v-deep(.swiper-wrapper) {
              height: 570px;
              display: flex;
              align-items: center;
            }

            ::v-deep(.swiper-button-next) {
              width: 100px;
              height: 100px;
              display: flex !important;
              background: #fff;
              justify-content: center;
              opacity: 0.8;
              top: 50%;
              right: 0;
              margin-top: -50px;
            }

            ::v-deep(.swiper-button-prev) {
              width: 100px;
              height: 100px;
              display: flex !important;
              background: #fff;
              justify-content: center;
              opacity: 0.8;
              top: 50%;
              left: 0;
              margin-top: -50px;
            }

            ::v-deep(.swiper-slide) {
              width: 390px;
              height: 570px;
              position: relative;
              cursor: pointer;
              box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
              padding-top: 10px;

              .img-box {
                height: 400px;
                text-align: center;
                margin-bottom: 10px;
                img {
                  height: 100%;
                  width: 90%;
                  object-fit: contain;
                }
              }
              // margin-right: 24px;

              &:last-child {
                margin-right: 0;
              }
            }

            .info-box {
              padding: 0 20px;
              .name {
                margin: 30px 0 16px;
                line-height: 16px;
                font-size: 16px;
                font-weight: 600;
                color: #000;
              }

              .second-title {
                line-height: 16px;
                font-size: 16px;
                font-weight: 600;
                color: #999;
                margin-bottom: 12px;

                .author {
                  margin-right: 10px;
                  margin-bottom: 18px;
                }
              }

              .collect {
                color: #999;
                font-size: 16px;

                img {
                  // width: 30px;
                  width: 18px;
                  height: 18px;
                  position: relative;
                  top: -3px;
                  margin-right: 5px;
                }
              }
            }
          }

          .comment-area {
            // padding: 60px 0 0 148px;

            .comment-area-title {
              line-height: 16px;
              font-size: 14px;
              font-weight: bold;
              color: #000;
              margin-bottom: 30px;
            }

            .comment-input {
              display: flex;
              margin-bottom: 84px;

              .head-img {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                margin-right: 16px;
              }

              ::v-deep(.el-textarea__inner) {
                background: #f5f5f5;
              }

              ::v-deep(.el-textarea .el-input__count) {
                background: #f5f5f5;
              }
            }

            .release-comment {
              width: 100px;
              height: 36px;
              background: #E0CBB4;
              cursor: pointer;
              font-size: 14px;
              font-weight: bold;
              color: #333;
              display: inline-flex;
              float: right;
              justify-content: center;
              align-items: center;
              margin-top: 16px;
            }
          }
        }
      }
    }
  }

  &.z-phone {
    margin-top: pxtorem(88) !important;
    .artwork-desc-left {
      .artwork-header {
        padding: pxtorem(32) pxtorem(32) pxtorem(20);

        .name {
          font-size: pxtorem(36);
          font-weight: bold;
          color: #000000;
          margin-bottom: pxtorem(12);
        }
        .type {
          font-size: pxtorem(24);
          color: #000000;
        }

        .line {
          width: 100%;
          height: pxtorem(2);
          background: #E8E8E8;
          margin-top: pxtorem(16);
        }
      }

      .user {
        padding: 0 pxtorem(32) pxtorem(20);
        display: flex;
        align-items: center;

        .photo {
          width: pxtorem(82);
          height: pxtorem(82);
          display: inline-block;
          vertical-align: top;
          margin-right: pxtorem(22);

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .user-info {
          display: inline-block;
          flex: 25%;

          .name {
            font-size: pxtorem(24);
            font-weight: 600;
            color: #333333;
          }

          .position {
            font-size: pxtorem(22);
            color: #333;
          }
        }

        .info-follow {
          // display: inline-block;
          width: pxtorem(132);
          height: pxtorem(50);
          float: right;
          border: 1px solid #E8E8E8;

          img {
            width: pxtorem(34);
          }
        }
      }

      .img-box {
        .big-img {
          width: pxtorem(750);
          height: pxtorem(750);
          background-color: #f0f0f0;
          display: flex;
          align-items: center;
          margin-bottom: pxtorem(24);

          .image {
            width: 100%;
          }
        }

        .left-menu {
          .item {
            display: inline-block;
          }
        }

        .bannerBox{
          width: 100%;
          padding-bottom: pxtorem(32);

          .swiper-container-banner {
            margin-bottom: pxtorem(15);
          }
          .img{
            width: 100%;
            height: 100%;
          }
          .gallery-top{
            width: 100%;
            height: pxtorem(750);
            // border: 1px solid #CCD2E7;
            // border-radius: 8px;
            background: #F0F0F0;

            img {
              height: pxtorem(376);
              object-fit:cover;
            };

            .swiper-slide {
              display: flex;
              align-items: center;
            }
          }
          .gallery-thumbs{
            width: pxtorem(88);
            height: pxtorem(88);
            img{
              border: 1px solid #CCD2E7;
              border-radius: 4px;
              box-sizing: border-box;
            }

            .swiper-slide-active {
              border: 1px solid #000;
            }

          }
          .swiper-slide-thumb-active{
            border: 2px solid #284198;
            border-radius: 4px;
          }
        }

        .introduction {
          font-size: pxtorem(22);
          font-weight: 400;
          color: #333;
          margin-bottom: pxtorem(40);
        }

        .btn {
          text-align: center;
          margin-bottom: pxtorem(47);

          .share,
          .collect {
            width: pxtorem(322);
            height: pxtorem(50);
            border: 1px solid #E8E8E8;
            vertical-align: top;
            display: inline-flex;
            margin-right: pxtorem(30);

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .work_detail {
          padding: 0 pxtorem(33) pxtorem(40);

          .work_detail_title,
          .desc {
            font-size: 24px;
            font-weight: 600;
            color: #000000;
          }

          .desc {
            margin-top: pxtorem(23);
            font-weight: 400;
          }
        }

        .explain {
          padding-bottom: pxtorem(40);
          .title,
          .desc {
            font-size: 24px;
            font-weight: 600;
            color: #000000;
          }

          .desc {
            font-weight: 400;
            margin-top: pxtorem(24);
          }
        }
      }
    }

    .recomment {
      color: #333;
      padding: 0 pxtorem(24) pxtorem(40);
      // margin-bottom: 70px;
      // width: 1440px;
      // background: #fff;
      // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
      // --swiper-navigation-color: #000;/* 单独设置按钮颜色 */
      // --swiper-navigation-size: 30px;/* 设置按钮大小 */
      position: relative;

      .title {
        margin-bottom: pxtorem(22);
        font-size: pxtorem(22);
        font-weight: bold;
        color: #000;
      }

      // ::v-deep(.swiper-button-next) {
      //   width: 100px;
      //   height: 100px;
      //   display: flex !important;
      //   background: #fff;
      //   justify-content: center;
      //   opacity: 0.8;
      //   top: 50%;
      //   right: 0;
      //   margin-top: -50px;
      // }

      // ::v-deep(.swiper-button-prev) {
      //   width: 100px;
      //   height: 100px;
      //   display: flex !important;
      //   background: #fff;
      //   justify-content: center;
      //   opacity: 0.8;
      //   top: 50%;
      //   left: 0;
      //   margin-top: -50px;
      // }

      ::v-deep(.swiper-slide) {
        width: pxtorem(300);
        // height: 550px;
        position: relative;
        cursor: pointer;

        img {
          width: pxtorem(300);
        }
        // margin-right: 24px;

        &:last-child {
          margin-right: 0;
        }
      }

      .info {
        // position: absolute;
        // bottom: 0;
        .name {
          margin: 30px 0 16px;
          line-height: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #000;
        }

        .second-title {
          line-height: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #999;
          margin-bottom: 12px;

          .author {
            margin-right: 10px;
            margin-bottom: 18px;
          }
        }

        .collect {
          color: #999;
          font-size: 16px;

          img {
            // width: 30px;
            width: 18px;
            height: 18px;
            position: relative;
            top: -3px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
